<template>
  <div class="container">
    <!-- 学员卡页面 按钮部分 -->
    <div class="handle-box">
      <el-button-group class="ml-4">
        <el-button type="success" @click="addMemberCard">添加课时卡</el-button>
      </el-button-group>
    </div>
    <el-divider></el-divider>
    <!-- 学员卡列表 -->
    <el-table :data="tableData" border style="width: 100%" max-height="400">
      <el-table-column prop="cardId" label="卡号" width="140" show-overflow-tooltip />
      <el-table-column prop="studentId" label="学员ID" width="120" show-overflow-tooltip />
      <el-table-column prop="cardName" label="课时卡名称" width="180" show-overflow-tooltip />
      <el-table-column label="类型" width="100" show-overflow-tooltip>
        <template #default="scope">
          <el-tag>
            {{ getCardLevel(scope.row.cardName) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="totalClasses" label="总课时" width="80" />
      <el-table-column prop="remainingClasses" label="剩余课时" width="80" />
      <el-table-column prop="price" label="价格(元)" width="100" />
      <el-table-column prop="startDate" label="生效日期" width="110" />
      <el-table-column prop="expireDate" label="到期日期" width="110" />
      <el-table-column prop="isNotified" label="到期提醒" width="90">
        <template #default="scope">
          <el-tag :type="scope.row.isNotified ? 'warning' : 'info'">
            {{ scope.row.isNotified ? '已提醒' : '未提醒' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180" show-overflow-tooltip />
      <el-table-column prop="updateTime" label="更新时间" width="180" show-overflow-tooltip />
      <el-table-column label="操作" width="140" fixed="right">
        <template #default="scope">
          <el-button type="primary" link size="small" @click="memberCardEdit(scope.row)">编辑</el-button>
          <el-button type="danger" link size="small" @click="deleteMemberCard(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-row style="margin-top: 30px;">
      <el-col :span="20">
        <el-pagination
          :current-page="pageData.pageCurrent"
          :page-size="pageData.pageSize"
          layout="prev, pager, next"
          :total="pageData.pageTotal"
          background
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>

    <!-- 添加/修改学员卡抽屉 -->
    <el-drawer v-model="addEditDrawer" direction="rtl" size="50%" :before-close="handleClose">
      <template #header>
        <h2>{{ drawerTitle }}</h2>
      </template>
      <AddEditMemberCardForm
        :memberCardFormData="memberCardFormData"
        v-model:addEditDrawer="addEditDrawer"
        :drawerTitle="drawerTitle"
      />
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import AddEditMemberCardForm from './MemberCardComponent/AddEditMemberCardForm.vue'
import axios from 'axios'

const pageData = reactive({
  pageCurrent: 1,
  pageSize: 7,
  pageTotal: 0
})

const tableData = ref([])

const getData = async () => {
  const res = await axios.get('http://localhost:8080/api/class-cards')
  const all = Array.isArray(res.data) ? res.data : res.data.data
  pageData.pageTotal = all.length
  const start = (pageData.pageCurrent - 1) * pageData.pageSize
  const end = pageData.pageCurrent * pageData.pageSize
  tableData.value = all.slice(start, end)
}

watch(() => pageData.pageCurrent, () => {
  getData()
})

onMounted(() => {
  getData()
})

const handleCurrentChange = (val) => {
  pageData.pageCurrent = val
}

const addEditDrawer = ref(false)
const drawerTitle = ref('')
const memberCardFormData = ref({})

const addMemberCard = () => {
  drawerTitle.value = '添加课时卡'
  memberCardFormData.value = {} // 确保是新的引用
  addEditDrawer.value = true
}

const memberCardEdit = (row) => {
  drawerTitle.value = '修改课时卡'
  memberCardFormData.value = { ...row }
  addEditDrawer.value = true
}

const deleteMemberCard = async (row) => {
  ElMessageBox.confirm(
    '你确定要删除此学员卡吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      await axios.delete(`http://localhost:8080/api/class-cards/${row.cardId}`)
      ElMessage.success('删除成功')
      getData() // 删除后刷新列表
    })
    .catch(() => {
      ElMessage.info('取消删除')
    })
}

const handleClose = (done) => {
  ElMessageBox.confirm('你确定关闭吗?')
    .then(() => {
      done()
    })
    .catch(() => {})
}

function getCardLevel(cardName) {
  if (!cardName) return ''
  if (cardName.includes('初级')) return '初级卡'
  if (cardName.includes('中级')) return '中级卡'
  if (cardName.includes('高级')) return '高级卡'
  if (cardName.includes('进阶')) return '进阶卡'
  if (cardName.includes('体验')) return '体验卡'
  if (cardName.includes('特惠')) return '特惠卡'
  if (cardName.includes('基础')) return '基础卡'
  return '普通卡'
}
</script>

<style lang="less" scoped>
.handle-box {
  margin-bottom: 20px;
}
.btn-opt {
  font-size: 13px;
  .el-button {
    margin-left: 3px;
    font-size: 13px;
    padding: 1px 6px;
  }
}
</style>
